{% extends 'base.html' %}

{% block title %}
    辅导员 - {{ rid }} {{ name }}_电气信息学院请假管理系统
{% endblock title %}

{% block body %}
    <div class="container d-flex align-items-center" style="height: calc(100% - 62px);">
        <div class="itemcard">
            <div class="itemcard-menu">
                <ul class="pagination">
                    <li data-itemcard-menu="1" class="page-item active"><button class="page-link"><i class="fa fa-address-card me-2"></i>用户信息</button></li>
                    <li data-itemcard-menu="2" class="page-item"><button class="page-link"><i class="fa fa-legal me-2"></i>审批</button></li>
                    <li data-itemcard-menu="3" class="page-item"><button class="page-link"><i class="fa fa-eercast me-2"></i>总览</button></li>
                    <li data-itemcard-menu="4" class="page-item disabled"><button class="page-link"><i class="fa fa-cogs me-2"></i>设置</button></li>
                </ul>
            </div>
            <div data-itemcard-page="1" class="itemcard-page active">
                <div class="container">
                    <div class="row h-100 flex-nowrap align-items-center justify-content-center">
                        <div class="col col-2 col-lg-2 col-sm-3">
                            {% include 'includes/headcard.html' %}
                        </div>
                        <table class="col col-8 table table-striped table-bordered m-0" border="3" style="width: 30%;background-color: #fff;">
                            <thead>
                                <tr><th colspan="2">教师信息</th></tr>
                            </thead>
                            <tbody>
                                <tr><td>ID</td><td>{{ rid }}</td></tr>
                                <tr><td>姓名</td><td>{{ name }}</td></tr>
                                <tr><td>性别</td><td>{{ gender }}</td></tr>
                                <tr><td>电话号码</td><td>{{ telphone }}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div data-itemcard-page="2" class="itemcard-page">
                <div class="container">
                    <div class="row">
                        <div id="approvalToolbar" class="col button-group">
                            <button class="btn btn-danger" id="btnRefuse">驳回申请<i class="fa fa-reply ms-2"></i></button>
                            <button class="btn btn-primary" id="btnAgree">同意申请<i class="fa fa-leaf ms-2"></i></button>
                        </div>
                        <table id="approvalTable" class="col"></table>
                    </div>
                </div>
            </div>
            <div data-itemcard-page="3" class="itemcard-page">
                <div class="container">
                    <div class="row">
                        <table id="totalTable" class="col"></table>
                    </div>
                </div>
            </div>
            <div data-itemcard-page="4" class="itemcard-page">
                设置
            </div>
        </div>
    </div>
{% endblock body %}

{% block script %}
    <script>
        let approvalTable = totalTable = null;
        $('[data-itemcard-menu="2"]').on('click', () => {
            if(approvalTable) return $('#approvalTable').bootstrapTable('refresh', {});
            approvalTable = $('#approvalTable').bootstrapTable({
                locale: 'zh-CN',
                toolbar: '#approvalToolbar',
                toolbarAlign: 'left',
                buttonsOrder: ['paginationSwitch', 'toggle', 'fullscreen', 'refresh', 'columns'],
                showPaginationSwitch: true,
                showToggle: true,
                showFullscreen: true,
                showRefresh: true,
                showColumns: true,
                showButtonText: false,
                showHeader: true,
                showFooter: false,
                pagination: true,
                search: true,
                searchTimeOut: 300,
                minimumCountColumns: 3,
                clickToSelect: true,
                multipleSelectRow: true,
                sortable: true,
                sortName: 'start_timestamp',
                sortOrder: 'asc',
                sortStable: false,
                rowStyle: function(row, index) {
                    let classes = '', css = '';
                    switch(row.state) {
                        case '待审批':
                            classes = 'table-warning';
                            break;
                        case '销假中':
                            classes = 'table-info';
                            break;
                        case '审批中':
                            classes = 'table-primary';
                            break;
                    }
                    return {
                        classes: classes,
                        css: css,
                    }
                },
                url: '/assistant/leaves?query=approval',
                columns: [{
                    field: 'select',
                    title: '复选',
                    checkbox: true,
                }, {
                    field: 'id',
                    title: '编号',
                    sortable: true,
                    align: 'center',
                    width: 1,
                }, {
                    field: 'sid',
                    title: '学号',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'name',
                    title: '姓名',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'category',
                    title: '类别',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'start_timestamp',
                    title: '开始日期',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'end_timestamp',
                    title: '结束日期',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'reason',
                    title: '原因',
                    sortable: true,
                }, {
                    field: 'state',
                    title: '状态',
                    sortable: true,
                    align: 'center',
                }],
                totalField: 'length',
                dataField: 'data',
                idField: 'id',
                uniqueId: 'id',
            });
            bindDragSelectEvent({
                $table: approvalTable,
                uniqueId: 'id',
                uniqueIdType: 'int',
                onEnd: function() {
                    let list = $('#approvalTable').bootstrapTable('getSelections');
                    if(list.length > 1) {
                        $('#btnRefuse > i').removeClass('fa-reply').addClass('fa-reply-all');
                    }
                    else {
                        $('#btnRefuse > i').removeClass('fa-reply-all').addClass('fa-reply');
                    }
                },
            }),
            $('#btnRefuse').on('click', function() {
                let list = $('#approvalTable').bootstrapTable('getSelections');
                if(!list) return dialogWarning('未选择任何数据!');
                let refuses = list.filter(value => value.state === '待审批').map(value => ({id: value.id, name: value.name}));
                let fails = list.filter(value => value.state !== '待审批').map(value => ({id: value.id, name: value.name}));
                if(!refuses.length) return dialogWarning(`未选择有效数据, 已过滤 ${fails.length} 条无效数据！`);
                let arr1 = [];
                for(row of refuses) {
                    arr1.push('<div class="col">' + row.id + ' ' + row.name + "</div>");
                }
                let arr2 = [];
                if(arr1.length % 2 === 0) {
                    for(i in arr1) {
                        if(i % 2 !== 0) {
                            arr2.push('<div class="row">' + arr1[i-1] + arr1[i] + '</div>')
                        }
                    }
                }
                else {
                    if(arr1.length === 1) {
                        arr2.push('<div class="row">' + arr1[0] + '</div>')
                    }
                    else {
                        arr2.push('<div class="row">' + arr1[0])
                        for(i in arr1) {
                            if(i > 0 && i % 2 === 0 && i !== arr1.length - 1) {
                                arr2.push(arr1[i-1] + '</div><div class="row">' + arr1[i]);
                            }
                            if(i === arr1.length - 1) {
                                arr2[arr2.length - 1] = arr2[arr2.length - 1] + arr1[arr1.length - 1] + '</div>';
                            }
                        }
                    }
                }
                let html = '<div class="container">' + arr2.join('') + '</div>';
                dialogConfirm('警告', `<div class="my-1 text-center text-danger">确定要驳回 ${refuses.length} 条申请吗? 该操作无法撤销! <br><small class="text-secondary">(已过滤 ${fails.length} 无效数据)</small></div><br>` + html, () => {
                    let form = new FormData();
                    form.append('ids', refuses.map(value => value.id));
                    form.append('action', 'refuse');
                    $.ajax({
                        async: !1,
                        crossDomain: !0,
                        type: 'post',
                        url: '/assistant/leaves',
                        headers: {
                            "cache-control": "no-cache"
                        },
                        processData: !1,
                        contentType: !1,
                        mimeType: "multipart/form-data",
                        data: form
                    }).done((function(data) {
                        $('#approvalTable').bootstrapTable('refresh', {}),
                        dialogInfo(JSON.parse(data).msg);
                    })).fail((function(jqXHR) {
                        dialogError(JSON.parse(jqXHR.responseText).msg);
                    }));
                });
            }),
            $('#btnAgree').on('click', function() {
                let list = $('#approvalTable').bootstrapTable('getSelections');
                if(!list) return dialogWarning('未选择任何数据!');
                let passes = list.filter(value => value.state === '销假中' || value.state === '待审批').map(value => ({id: value.id, name: value.name}));
                let fails = list.filter(value => value.state !== '销假中' && value.state !== '待审批').map(value => ({id: value.id, name: value.name}));
                if(!passes.length) return dialogWarning(`未选择有效数据, 已过滤 ${fails.length} 条无效数据！`);
                let arr1 = [];
                for(row of passes) {
                    arr1.push('<div class="col">' + row.id + ' ' + row.name + "</div>");
                }
                let arr2 = [];
                if(arr1.length % 2 === 0) {
                    for(i in arr1) {
                        if(i % 2 !== 0) {
                            arr2.push('<div class="row">' + arr1[i-1] + arr1[i] + '</div>')
                        }
                    }
                }
                else {
                    if(arr1.length === 1) {
                        arr2.push('<div class="row">' + arr1[0] + '</div>')
                    }
                    else {
                        arr2.push('<div class="row">' + arr1[0])
                        for(i in arr1) {
                            if(i > 0 && i % 2 === 0 && i !== arr1.length - 1) {
                                arr2.push(arr1[i-1] + '</div><div class="row">' + arr1[i]);
                            }
                            if(i === arr1.length - 1) {
                                arr2[arr2.length - 1] = arr2[arr2.length - 1] + arr1[arr1.length - 1] + '</div>';
                            }
                        }
                    }
                }
                let html = '<div class="container">' + arr2.join('') + '</div>';
                dialogConfirm('警告', `<div class="my-1 text-center text-danger">确定要同意 ${passes.length} 条申请吗? 该操作无法撤销! <br><small class="text-secondary">(已过滤 ${fails.length} 无效数据)</small></div><br>` + html, () => {
                    let form = new FormData();
                    form.append('ids', passes.map(value => value.id));
                    form.append('action', 'agree');
                    $.ajax({
                        async: !1,
                        crossDomain: !0,
                        type: 'post',
                        url: '/assistant/leaves',
                        headers: {
                            "cache-control": "no-cache"
                        },
                        processData: !1,
                        contentType: !1,
                        mimeType: "multipart/form-data",
                        data: form
                    }).done((function(data) {
                        $('#approvalTable').bootstrapTable('refresh', {}),
                        dialogInfo(JSON.parse(data).msg);
                    })).fail((function(jqXHR) {
                        dialogError(JSON.parse(jqXHR.responseText).msg);
                    }));
                });
            });
        }),
        $('[data-itemcard-menu="3"]').on('click', () => {
            if(totalTable) return $('#totalTable').bootstrapTable('refresh', {});
            totalTable = $('#totalTable').bootstrapTable({
                locale: 'zh-CN',
                buttonsOrder: ['paginationSwitch', 'toggle', 'fullscreen', 'refresh', 'columns'],
                showPaginationSwitch: true,
                showToggle: true,
                showFullscreen: true,
                showRefresh: true,
                showColumns: true,
                showButtonText: false,
                showHeader: true,
                showFooter: false,
                pagination: true,
                search: true,
                searchTimeOut: 300,
                minimumCountColumns: 3,
                clickToSelect: true,
                multipleSelectRow: true,
                sortable: true,
                sortName: 'start_timestamp',
                sortOrder: 'desc',
                sortStable: false,
                rowStyle: function(row, index) {
                    let classes = '', css = '';
                    switch(row.state) {
                        case '已完成':
                            classes = 'table-success';
                            break;
                        case '待审批':
                        case '待销假':
                            classes = 'table-warning';
                            break;
                        case '销假中':
                            classes = 'table-info';
                            break;
                        case '审批中':
                            classes = 'table-primary';
                            break;
                        case '已撤回':
                            classes = 'table-light';
                            break;
                        case '已驳回':
                            classes = 'table-danger';
                            break;
                    }
                    return {
                        classes: classes,
                        css: css,
                    }
                },
                url: '/assistant/leaves?query=total',
                columns: [{
                    field: 'id',
                    title: '编号',
                    sortable: true,
                    align: 'center',
                    width: 1,
                }, {
                    field: 'sid',
                    title: '学号',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'name',
                    title: '姓名',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'apply_timestamp',
                    title: '申请日期',
                    sortable: true,
                    align: 'center',
                    visible: false,
                }, {
                    field: 'category',
                    title: '类别',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'start_timestamp',
                    title: '开始日期',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'end_timestamp',
                    title: '结束日期',
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'reason',
                    title: '原因',
                    sortable: true,
                }, {
                    field: 'a1',
                    title: '辅导员审批',
                    sortable: true,
                    align: 'center',
                    visible: false,
                }, {
                    field: 'a2',
                    title: '教务处审批',
                    sortable: true,
                    align: 'center',
                    visible: false,
                }, {
                    field: 'state',
                    title: '状态',
                    sortable: true,
                    align: 'center',
                }],
                totalField: 'length',
                dataField: 'data',
                idField: 'sid',
                uniqueId: 'sid',
            });
            bindDragSelectEvent({
                $table: totalTable, 
            });
        });
    </script>
{% endblock %}
